<template>
  <div class="affix">
    <n-dropdown
        trigger="hover"
        placement="top-start"
        :options="options"
        show-arrow
    >
      <n-upload
          action="http://localhost:10000/springMVCProject_war_exploded/user/uploadAuthor"
          :headers="uploadHeader"
          name="upload"
          :show-file-list="false"
          @finish="handleFinish"
      >
    <n-avatar
        round
        size="large"
        :src="user.author"
        :fallback-src="require('../../assets/default.png')"
        bordered
        style="box-shadow: 0 2px 8px 0 rgba(0,0,0,0.30);transition: 200ms;cursor: pointer"

    />
      </n-upload>
    </n-dropdown>
  </div>
  <n-back-top :right="20" :bottom="20" show />
  <n-modal v-model:show="showModel">
    <n-card
        style="width: 400px"
        title="用户信息"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
    >
      <UserMsgTemplate :account="user.account" :create-time="user.createTime" :role="user.role" />
    </n-card>
  </n-modal>
</template>

<script>
import { useMessage } from "naive-ui";
import UserMsgTemplate from "@/components/Index/IndexContent/UserMsgTemplate";
export default {
  name: "UserMessageTemplate",
  components: {UserMsgTemplate},
  data(){
    return{
      message: useMessage(),
      options: [
        {
          label: "个人信息",
          key: "userMsg",
          props: {
            onClick:  () => {
              this.showModel=true;
            }
          },
        },
        {
          label: "安全中心",
          key: "userSafe",
          props: {
            onClick:  () => {
              this.$router.push('/index/safeOfUser')
            }
          }
        },
        {
          label: "退出登录",
          key: "userOut",
          props: {
            onClick:  () => {
              this.axios.get("/user/LoingOut").then((res)=>{
                const data=res.data;
                let msg;
                if (data.code>0) {
                  msg=data.error;
                }else {
                  msg=data.data;
                }
                if (this.$utils.tipsOption(data.code, data.status, msg)) {
                  return
                }
                this.$router.push("/login")
              })
            }
          }
        }
      ],
      showModel:false,
      baseAuthor:'http://localhost:10000/springMVCProject_war_exploded/author/',
      user:{
        userId:'',
        account:'',
        createTime:'',
        role:'',
        author:''
      },
      uploadHeader:{
        'token': localStorage.getItem('token')
      }
    }
  },
  methods:{
    loadUser:async function (){
      await this.axios.get("/user/loginMsg").then((res)=>{
        const data=res.data.data;
        this.user.userId=data.userId;
        this.user.role=data.roleId=='1'?"管理员":"订阅者";
        this.user.account=data.userAccount;
        this.user.createTime=this.$utils.dataUtil(data.userCreatetime)
        this.user.author=this.baseAuthor+this.user.userId+'.jpg?'+new Date().getTime()
      })
    },
    handleFinish:function (){
      this.user.author=this.baseAuthor+this.user.userId+'.jpg?'+new Date().getTime()
    }
  },
  mounted() {
    this.loadUser()
  }
}
</script>

<style scoped>
  .affix{
    position: fixed;
    bottom: 65px;
    right: 20px;
  }
  .n-avatar:hover{
    box-shadow: 0 2px 12px 0px rgba(0, 0, 0, 0.32) !important;
  }
</style>